<template>
	<view class="complaint">
		<view class="hint">
			恶意投诉将会封号,请谨慎投诉!为提高沟通效率,建议您拨打客服电话:<text style="color: red;">15565615912</text>
		</view>
		<view class="tle-one">请选择投诉原因</view>
		<view class="secelt">
			<u-radio-group>
				<view class="sece-txt">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" wrap :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</view>
			</u-radio-group>
			<view></view>
			<view></view>
			<view></view>
		</view>
		<view class="tle-two">联系方式</view>
		<view class="phone">
			<u-form :model="comFrom" label-width="150rpx" :border-bottom="false">
				<u-form-item label="手机号" :border-bottom="false">
					<u-input v-model="comFrom.phone" type="text" placeholder="请输入您的手机号码" />
				</u-form-item>
			</u-form>
		</view>
		<view class="tle-three">备注信息</view>
		<view class="info">
			<u-input v-model="comFrom.info" type="textarea" border="true" height="300"
				placeholder="请简明扼要地简述您的理由,以使工作人员更好的判断" maxlength="500" />
		</view>

		<view class="btn-box">
			<u-button class="btn" type="error" shape="circle" size="medium">提交</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '招聘方已找到司机/机手'
					},
					{
						name: '司机/机手信息位置错误'
					},
					{
						name: '虚假信息'
					}
				],
				comFrom: {
					phone: '',
					info: ''
				}
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.complaint {
		background-color: #f6f6f6;
		padding: 20rpx 0;


		.hint,
		.secelt,
		.phone,
		.info {
			padding: 20rpx;
			background-color: #fff;
		}

		.tle-one,
		.tle-two,
		.tle-three {
			padding: 20rpx;
			background-color: #f6f6f6;
		}

		/deep/.u-form-item {
			padding: 0 20rpx;
		}

		.secelt {
			padding: 0;

			.sece-txt {
				display: flex;
				flex-direction: column;

				/deep/.u-radio {
					width: 100% !important;
					display: flex;
					flex-direction: row-reverse;
					justify-content: space-between;
					padding: 10rpx 30rpx 10rpx 10rpx;
					border-bottom: 1px solid #f6f6f6;
				}
			}
		}

		.btn-box {
			height: 160rpx;
			position: relative;

			.btn {
				position: absolute;
				left: 50%;
				bottom: 30rpx;
				transform: translate(-50%);
			}
		}

	}
</style>
